详解：微信小程序中使用 iconfont 字体图标

网上关于字体图标使用方式的介绍文章很多，本篇文章主要是我在日常的微信小程序项目中对阿里字体图标库 iconfont 使用上的一些介绍与总结，如您已了解过其在 web 中的使用，可跳至第三节开始阅读。

脱胎于 web 的微信小程序从诞生起就支持 iconfont 字体图标，毕竟字体图标也是一种字体，只是设计成了图标的形式，与常用的宋体、微软雅黑等字体别无二致。 与传统图片形式的图标相比，其优势很多：

早前，我因为 Bootstrap 框架的集成而使用过 Font Awesome 字体图标库，后来遇到了iconfont-阿里巴巴矢量图标库，正如其宣传的那样——海量！

作为前端，在没有 UI 配合的情况下，iconfont 提供的海量图标让我很容易找到想要的图标，其使用上也很便捷，关于阿里图标的使用介绍，请查看官方提供的帮助中心，在此不做过多赘述。

由于大多图标上传者并非一人，其质量层次不齐，无法像 Font Awesome 那样做到风格一致，此时需要点开图标的编辑功能，对图标的大小与位置做一些统一的调整，以使选择的图标能在样式上保持一致。

我在 vue 项目中使用方式是直接将字体图标文件下载后放入到 static/iconfont 文件夹下，在 main.js 中引入即可；但同样的方式在小程序中是不可行的，问题如下： 首先将 iconfont.css 后缀名改为 .wxss，我一般会在项目根目录新建一个 static/iconfont 文件夹来存放字体文件，该文件的 iconfont.wxss 内容如下所示：

接下来在 app.wxss 文件中引入样式文件

但此时，微信开发者工具会报 do-not-use-local-path 错误，原因是微信小程序的样式文件不支持引入本地文件（无论是字体还是图片等资源， .wxml 文件支持本地图片），只支持外链或者 base64 方式引入，所以解决方案如下：

在 iconfont 项目页面，选择 Unicode 方式，生成在线代码，如下图所示：

接下来我们将 iconfont.wxss 中字体的本地路径改为网络路径，虽然首次加载（开发者工具清空全部缓存）时开发者工具会报加载异常，但字体图标文件实际已加载完成，图标能成功显示出来。 此时本地的字体文件已经无用了，我们可以将文件删除。这种方式可以减少文件的体积。当然如同下载时页面的提示一样，使用三方 CDN 是有一些风险的，前不久阿里字体就出现过无法访问的问题，稳妥点的方式是将字体文件上传到自己的服务器或者 cdn 中作为外链使用。 缺点：

该方式是我目前使用的方式，我也推荐使用该方式。 首先我们点击 iconfont 项目中的 项目设置 按钮，位置如下图所示：

我们勾选图中所示三种字体格式，选择 base64 是为了将另外两种字体转为 base64 形式，而选择 woff 与 ttf 字体原因如下：

微信的官方文档中也建议选择以上两种字体：

建议格式为 TTF 和 WOFF，WOFF2 在低版本的 iOS 上会不兼容。

我们再次下载设置后的字体图标文件，并将 iconfont.css 重命名为 iconfont.wxss，因为下载的文件已将字体转为 base64 格式放入到 iconfont.wxss 中，所以我们只需要将 iconfont.wxss 文件复制到项目中即可，如下图所示：

虽然 base64 形式会增加约 1/3 的体积，但在少量图标的情况下，我更推荐这种方式引入，增加新图标时也只需要替换该文件即可，且由于会编译到小程序包文件中，不会出现外链形式在弱网或加载失败时图标显示为方框（所有字体找不到对应字符编码文件时都会显示成这样）的问题。

字体图标使用很简单，代码如下：

每次写重复的标签与类名，不如将其封装为图标组件，只需要传入字体名称等属性，在使用上会方便很多。

icon 组件的封装代码如下，name 即为字体图标的名称：

图标组件在使用时，为方便起见，我会将图标组件设置为全局组件，使其在任意页面或组件中可直接使用。

页面中使用

iconfont.wxss 的默认样式如下图所示： 字体图标是使用 css 伪元素的方式实现，由于字体图标质量层次不齐，我在日常使用中一般会对其做一些调整，如设置默认水平垂直居中、默认字体大小改为 rpx 单位，以适应微信小程序，代码如下：

字体图标名称的前缀与 font family 是可以调整的，可以在 iconfont 项目设置 中更改字体名称与前缀（推荐此方式），也可以更改下载后的 .css 文件，以避免在多人协作项目中与他人的命名产生冲突； 特别是在制作组件库时，需要修改名称与自己组件库的命名空间保持一致。 变更方法如下，打开 项目设置：

保存后再次下载的图标文件中对应的 iconfont.wxss 文件内容如下：

使用示例：

如您阅读过程中遇到任何问题，请留言。